<template>
    <div 
      class="fixed bottom-4 right-4 max-w-sm bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 ease-in-out"
      :class="{
        'translate-y-0 opacity-100': visible,
        'translate-y-10 opacity-0': !visible
      }"
      :style="{ backgroundColor: getBackgroundColor, color: getTextColor }"
    >
      <div class="flex items-start">
        <div class="flex-shrink-0 mt-0.5" :class="getIconClass">
          <i :class="getIcon"></i>
        </div>
        <div class="ml-3">
          <p class="text-sm font-medium">{{ message }}</p>
        </div>
        <button 
          class="ml-auto flex-shrink-0 flex items-center justify-center h-5 w-5 rounded-full text-gray-400 hover:bg-gray-100 focus:outline-none"
          @click="hideToast"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted, defineProps, defineEmits } from 'vue'
  
  export default {
    name: 'ToastMessage',
    props: {
      message: {
        type: String,
        required: true
      },
      type: {
        type: String,
        default: 'info',
        validator: value => ['info', 'success', 'warning', 'error'].includes(value)
      },
      duration: {
        type: Number,
        default: 5000
      }
    },
    setup(props, { emit }) {
      const visible = ref(true)
      
      const getIcon = () => {
        switch(props.type) {
          case 'success':
            return 'fa fa-check-circle';
          case 'error':
            return 'fa fa-exclamation-circle';
          case 'warning':
            return 'fa fa-exclamation-triangle';
          case 'info':
          default:
            return 'fa fa-info-circle';
        }
      }
      
      const getIconClass = () => {
        switch(props.type) {
          case 'success':
            return 'text-green-500';
          case 'error':
            return 'text-red-500';
          case 'warning':
            return 'text-yellow-500';
          case 'info':
          default:
            return 'text-blue-500';
        }
      }
      
      const getBackgroundColor = () => {
        switch(props.type) {
          case 'success':
            return 'bg-green-50';
          case 'error':
            return 'bg-red-50';
          case 'warning':
            return 'bg-yellow-50';
          case 'info':
          default:
            return 'bg-blue-50';
        }
      }
      
      const getTextColor = () => {
        switch(props.type) {
          case 'success':
            return 'text-green-800';
          case 'error':
            return 'text-red-800';
          case 'warning':
            return 'text-yellow-800';
          case 'info':
          default:
            return 'text-blue-800';
        }
      }
      
      const hideToast = () => {
        visible.value = false
        setTimeout(() => {
          emit('close')
        }, 300)
      }
      
      onMounted(() => {
        setTimeout(() => {
          hideToast()
        }, props.duration)
      })
      
      return {
        visible,
        getIcon,
        getIconClass,
        getBackgroundColor,
        getTextColor,
        hideToast
      }
    }
  }
  </script>
      